<template>
  <div class="hello">
    <el-card class="box-card">
      <div id="form">
        <h1 style="margin-left: 120px">雅职校易通</h1>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入账号" ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verifyCode">
            <el-input v-model="form.verifyCode" placeholder="请输入验证码" ></el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <div @click="flushVerifyCode">
              <img id="img" :src="imgUrl" alt="加载失败" width="80px"/>
              <!--            <svg  id="svg" @click="flushVerifyCode" t="1659365 551124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" width="32" height="28"><path d="M960 630.4c-12.8-3.2-25.6 3.2-32 12.8-76.8 204.8-320 307.2-544 227.2-224-80-342.4-307.2-265.6-512 76.8-204.8 320-307.2 544-227.2 92.8 32 172.8 92.8 224 172.8l-92.8 0c-12.8 0-25.6 9.6-25.6 22.4 0 12.8 9.6 22.4 25.6 22.4l153.6 0c12.8 0 25.6-9.6 25.6-22.4l0-140.8c0-12.8-9.6-22.4-25.6-22.4-12.8 0-25.6 9.6-25.6 22.4l0 89.6c-57.6-86.4-140.8-150.4-246.4-188.8-249.6-86.4-518.4 28.8-608 256-86.4 230.4 44.8 486.4 294.4 572.8 249.6 86.4 518.4-28.8 608-256C979.2 649.6 972.8 636.8 960 630.4z" p-id="2701" fill="#1296db"></path></svg>-->
              <p id="flushText">&nbsp;&nbsp;&nbsp;&nbsp; 点击图片刷新</p>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button id="button" type="primary" @click="onSubmit('form')">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import {Message} from "element-ui";


export default {
  name: "login",
  data() {
    return {
      imgUrl:  this.$BASE_URL+"/system/getVerifyCode",
      form: {
        userName: '',
        password: '',
        verifyCode: '',
        accountName:''
      },
      rules: {
        userName: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    onSubmit(formName) {

      this.$refs[formName].validate((valid) => {

        if(valid){
          // 登录
          axios({
            url: this.$BASE_URL+"/user/login",
            params: this.form,
            method: "post"
          }).then(resp => {
            let data = resp.data.data;
            let code = resp.data.code;
            let msg = resp.data.msg
            if (code === 200) {
              console.log(data.token);
              localStorage.setItem("token", data.token);
              localStorage.setItem("accountName", this.form.accountName);
              localStorage.setItem("activeIndex", "5");
              localStorage.setItem("role", data.role);

              this.$router.push({
                name: "leave",
                params:{
                  accountName: this.form.accountName
                }
              })
            } else {
              Message.error(msg)
            }
          }, err => {
            Message.error(err.msg)
          })
        }
      })
    },
    flushVerifyCode() {
      this.imgUrl =   this.$BASE_URL+"/system/getVerifyCode?" + Math.random();
    }


  }
}
</script>

<style scoped>


.box-card {
  position: absolute;
  width: 480px;
  height: 480px;
  left: 35%;
  top: 20%;
}


#form {
  position: absolute;
  top: 25%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  width: 350px;

}

#button {
  width: 150px;
}

#img {
  position: absolute;
  top: 100px;
  left: 200px;
  margin-top: -100px;
  margin-left: -200px;
  width: 100px;
}

#flushText {

  position: absolute;
  top: 100px;
  left: 200px;
  margin-top: -100px;
  margin-left: -100px;
  width: 150px;
}

</style>
